<!--
合并相邻外边距
    垂直方向（上、下）外边距定义时，会有合并问题
    
    两种问题
        1）相邻块元素垂直外边距的合并
        2）嵌套块元素垂直外边距的塌陷

相邻合并
    上下相邻的块元素，上面的有margin-bottom，下面的有margin-top；
    此时，它们垂直间距不是【1+1=2】两者之和，而是取到两者中较大者的间距，
    这种现象就叫做“相邻块元素垂直外边距的合并”。
解决
    方法1：都设置一样的间距，取谁的都一样。
    方法2：要么只保留m-top，要么只保留m-bottom，二选一。
-->
<style>
    body {
        margin: 0;
    }
    div {
        width: 200px;
        height: 100px;
        background: cyan;
    }
    /* 页面中20、30都存在，但效果是30的间距，相当于20的嵌入到了30之中。 */
    .myTop {
        margin-bottom: 20px;
    }
    .myBottom {
        margin-top: 30px;
    }
</style>

<div class="myTop">top</div>
<div class="myBottom">bottom</div>